
<div id="eventDetailDiv" class="container">
    <div class="row">
        <div class="col-xs-12 event-header no-padding">
            <div class="carousel slide" data-ride="carousel">
                <div class="carousel-inner">
                    <div class="item active">
                    <img src="{{ races[0].event_image_link }}" alt="" class="img-responsive">
                       <div id="ticketsCarouselHeader1" class="carousel-caption">
                           <h1 class="event-header-text text-bold">{{ sport | uppercase }}</h1>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 white-bg event-content">
            <h3 class="text-to-bg-color text-center">Events</h3>
            <ul class="list-group">
                <li ng-repeat="race in races" class="list-group-item text-center text-bold event-list" style="margin-bottom:2px;">
                      <a href="#/events/{{ race.event_id }}" class="btn btn-block text-white text-light" style="white-space: normal; word-wrap: break-word;">
                          {{ race.event_day | uppercase }} - {{ race.event_start_time }} {{ race.event_name }}
                      </a>
                </li>
            </ul>
            <br>
        </div>
    </div>
</div>